<template>
  <div class="login_body">
  <div class="login_box">
    <!-- <div class="login_title"> <span>登录界面</span></div> -->
    <el-divider><div class="login_title_span"><span>登录</span></div></el-divider>
    
    <el-form class="login_form"
      :model="login"
      :rules="rules"
      ref="loginForm" 
      label-width="100px" >
      <el-form-item label="账号" prop="username">
        <el-input v-model="login.username" class="login_input"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="login.password" class="login_input"></el-input>
      </el-form-item>
      <div class="login_btn">
        <el-button type="primary" @click="doLogin">登录</el-button>
        <!-- <el-button @click="saveLocalStorage">重置</el-button> -->
        <el-button @click="toRegister()">注册</el-button>
        <!-- <el-button @click="showUser">User</el-button> -->
      </div>
      <el-form-item>
        <span id="login_tip">{{login_tip}}</span>
      </el-form-item>

    </el-form>
  </div>
  </div>
</template>

<script>
export default {
  components: {},
  activated() {},
  data() {
    return {
      login_tip:'',
      login: {
        username: "171110531",
        password: "123456",
      },
      userToken: "",
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 9, max: 10, message: "长度在9~10位", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6 , message: "密码至少六位", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 
    saveLocalStorage(){
      localStorage.setItem("user_token_"+this.currentUser.user.uid, this.login.username);
      this.currentUser.user.nickName = this.login.username;
    },
    showUser(){
      console.log("username", this.currentUser.user.nickName);
    },
    // 发送登录请求
    doLogin() {
      console.log("发送登录请求");
      var data = {
        'stuid':this.login.username,
        'password':this.login.password,
      }
      console.log()
      this.$http1({
        url: this.$http.adornUrl("/user/login/user/dologin"),
        method: "post",
        data: this.$http.adornData(data, false)
      }).then(({ data }) => {
        if(data.code == 10000){
          console.log("登录成功",data)
          // this.$root.user.uid = data.user;
          this.$root.changeCurrentUser(data.user);
          this.userToken = data.token;
          localStorage.setItem("user_token_"+data.user.uid, data.token);
          // localStorage.setItem("user_token", data.token);
          // this.$cookie.set('user_token_'+data.user.uid, data.token);
          this.$router.replace({name: 'main-content'})

          
          // window.location.href="/#/message"; // 这里暂时跳转到 对话界面
        }else{
          console.log("登录失败" , data.msg)
          this.login_tip = data.msg;

        }
        
      });

    },
    toRegister(){
      this.$router.replace({name: 'register'})
    }
  },
};
</script>

<style>
.login_body{
  background-image: url(http://localhost:88/api/user/test_pic/background_bili.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  position: absolute;
  height: 100%;
  width: 100%;
  min-width: 980px;
  /* background: #ccc; */
}
/* === 登录表单 === */
.login_box{
  /* position: relative; */
    width: 500px;
    height: 260px;
    margin: 200px auto 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 5px #eee;

    background: #fff;
}
.login_title_span{
  font-size: 20px;
}
.login_title{
    text-align: center;
    height: 50px;
}
.login_title span{
    font-size: 20px;
}
.login_input{
    width: 90%;
}
.login_btn{
    display: flex;
}
.login_btn button{
    width: 120px;
    margin: 0 auto;
}
#login_tip{
  color: #f00;
}
</style>